<template>
  <div style="position:relative;"
       :style="{'height':mapHeight+'px'}">
    <div :class="fullScreenStatus ? 'map-wrap-full' : 'map-wrap'">
      <div id="eden-map"
           :class="fullScreenStatus ? 'map-full' : ''"></div>
    </div>
    <audio id="audioPlay"
           src="static/119.ogg"
           controls="controls"
           style="display:none;"></audio>
    <Spin size="large"
          fix
          v-if="spinShow"
          style="z-index:99999"></Spin>
  </div>
</template>
<script>
import AMap from 'AMap'
import SHOP_PNG from './icon/shop.png'
import HYDRANT_PNG from './icon/hydrant.png'
import FIRE_DETACH_PNG from './icon/fireDetachment.png'
import MEDICAL_PNG from './icon/medical.png'
import MINI_FIRESTATION_PNG from './icon/miniFireStation.png'
import { getShopLocation } from '@/api/monitor'

export default {
  mounted() {
    this.mapInit()
    this.getPoints()
    this.mapHeight =
      window.innerHeight - 150 < 300 ? 300 : window.innerHeight - 150
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下高度．
    const that = this
    window.addEventListener('resize', function() {
      that.mapHeight =
        window.innerHeight - 150 < 300 ? 300 : window.innerHeight - 150
    })
  },
  data() {
    return {
      mapHeight: 800,
      points: [],
      map: '',
      fullScreenStatus: false,
      MarkerClustererMarker: '',
      vMarkerClustererMarkers: [],
      vMarkerClustererStatus: true,
      spinShow: true
    }
  },
  methods: {
    updateDatas(data) {
      this.$emit('sendData', data)
    },
    mapInit() {
      this.map = new AMap.Map('eden-map', {
        resizeEnable: true,
        center: [105, 34],
        zoom: 5,
        zooms: [3, 20],
        expandZoomRange: true,
        mapStyle: 'amap://styles/fresh'
      })
    },
    markerClustererInit() {
      var points = this.points
      if (points.length > 0) {
        const _this = this

        for (let i = 0; i < points.length; i++) {
          let iconSrc = SHOP_PNG
          if (points[i].shopPlace == 11) {
            iconSrc = HYDRANT_PNG
          } else if (points[i].shopPlace == 12) {
            iconSrc = MINI_FIRESTATION_PNG
          } else if (points[i].shopPlace == 13) {
            iconSrc = MEDICAL_PNG
          } else if (points[i].shopPlace == 14) {
            iconSrc = FIRE_DETACH_PNG
          }
          let marker = new AMap.Marker({
            position: new AMap.LngLat(points[i].lng, points[i].lat),
            icon: new AMap.Icon({
              image: iconSrc,
              size: new AMap.Size(48, 48), //图标大小
              imageSize: new AMap.Size(48, 48)
            }),
            // icon:
            //   points[i].shopName.indexOf('消防栓') > -1
            //     ? HYDRANT_PNG
            //     : SHOP_PNG,
            // content:
            //   '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15),
            extData: i
          })
          var infoWindow = new AMap.InfoWindow({
            isCustom: true,
            offset: new AMap.Pixel(20, -30)
          })

          marker.content = i
          marker.on('click', markerClick)
          function markerClick(e) {
            //构建信息窗体中显示的内容
            var index = e.target.content
            var shop = points[index]

            //实例化信息窗体
            var title = shop.shopName
            var content = []
            content.push(`<p ><span>所属部门 :</span> ${shop.depName}</p>`)
            content.push(`<p ><span>负责人 :</span> ${shop.managerName}</p>`)
            content.push(
              `<p ><span>联系电话 :</span> ${shop.managerMobile}</p>`
            )
            content.push(`<p ><span>设备数 :</span> ${shop.devCount}</p>`)
            content.push(`<p ><span>IMEI :</span> ${shop.imei}</p>`)
            content.push(`<p ><span>商铺地址 :</span>${shop.addr}</p></div>`)
            // var infoWindow = new AMap.InfoWindow({
            //   isCustom: true, //使用自定义窗体
            //   content: createInfoWindow(title, content.join("<br/>")),
            //   offset: new AMap.Pixel(16, -45)
            // });

            //构建自定义信息窗体
            function createInfoWindow(title, content) {
              var info = document.createElement('div')
              info.className = 'custom-info input-card content-window-card'

              //可以通过下面的方式修改自定义窗体的宽高
              //info.style.width = "400px";
              // 定义顶部标题
              var top = document.createElement('div')
              var titleD = document.createElement('div')
              var closeX = document.createElement('img')
              top.className = 'info-top'
              titleD.innerHTML = title
              closeX.src = 'https://webapi.amap.com/images/close2.gif'
              closeX.onclick = closeInfoWindow

              top.appendChild(titleD)
              top.appendChild(closeX)
              info.appendChild(top)

              // 定义中部内容
              var middle = document.createElement('div')
              middle.className = 'info-middle'
              middle.style.backgroundColor = 'white'
              middle.innerHTML = content
              info.appendChild(middle)

              // 定义底部内容
              var bottom = document.createElement('div')
              bottom.className = 'info-bottom'
              bottom.style.position = 'relative'
              bottom.style.top = '0px'
              bottom.style.margin = '0 auto'
              var sharp = document.createElement('img')
              sharp.src = 'https://webapi.amap.com/images/sharp.png'
              bottom.appendChild(sharp)
              info.appendChild(bottom)
              return info
            }

            //关闭信息窗体
            function closeInfoWindow() {
              _this.map.clearInfoWindow()
            }

            infoWindow.setContent(createInfoWindow(title, content.join('')))
            infoWindow.open(_this.map, e.target.getPosition())
          }
          _this.vMarkerClustererMarkers.push(marker)
        }
        // AMap.plugin(["AMap.ToolBar", "AMap.MouseTool", "AMap.MarkerClusterer"]);
        AMap.plugin(
          ['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType'],
          function() {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            _this.map.addControl(new AMap.ToolBar())

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            _this.map.addControl(new AMap.Scale())

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            _this.map.addControl(new AMap.OverView({ isOpen: true }))

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            _this.map.addControl(new AMap.MapType())
          }
        )
        _this.map.plugin(['AMap.MarkerClusterer'], function() {
          _this.MarkerClustererMarker = new AMap.MarkerClusterer(
            _this.map, // 地图实例
            _this.vMarkerClustererMarkers, // 海量点组成的数组
            { gridSize: 80, minClusterSize: 10 }
          )
        })
        // AMap.plugin(["AMap.MarkerClusterer"]);
        // _this.map.addControl(
        //   (_this.MarkerClustererMarker = new AMap.MarkerClusterer(
        //     _this.map,
        //     _this.vMarkerClustererMarkers,
        //     { gridSize: 80 }
        //   ))
        // );
        // _this.map.setFitView();
      }
    },
    async getPoints() {
      let res = await getShopLocation({})
      if (res.code == 0) {
        console.log(res)
        this.points = res.data
        this.spinShow = false
        this.markerClustererInit()
      }
    },
    fullScreen() {
      this.fullScreenStatus = !this.fullScreenStatus
    },
    locateMarker(lng, lat) {
      this.map.setZoomAndCenter(17, [lng, lat])
    }
  }
}
</script>
<style>
.map-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2020;
}
.map-wrap-full {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  z-index: 2020;
  top: 0;
  left: 0;
}
.map-full {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.map-wrap #eden-map {
  width: 100%;
  height: 100%;
}
.map-operator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: 85px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.map-operator > div {
  position: relative;
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
  cursor: pointer;
}
.map-operator .drawing {
  background-image: url('icon/draw.png');
  color: #fe6579;
}
.map-operator .submit {
  background-image: url('icon/submit.png');
  color: #a9ea0a;
}
.map-operator .clear {
  background-image: url('icon/clear.png');
  color: #b8c5cd;
}

.map-operator > div > div {
  position: absolute;
  width: 52px;
  height: 22px;
  line-height: 22px;
  left: 0;
  bottom: -22px;
  font-size: 14px;
}
.marker {
  position: absolute;
  top: -20px;
  right: -118px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
  white-space: nowrap;
  font-size: 12px;
  font-family: '';
  background-color: #25a5f7;
  border-radius: 3px;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  line-height: 20px;
}
.content-window-card p span {
  float: left;
  width: 58px;
  color: #a1a1a1;
}
.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #09baf0;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 10px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}
</style>
